<template>
  <div class="main">
    <div class="bgc">
      <img :src="url" alt="" />
    </div>
    <div class="bai" :class="{ turn: turn }">
      <img src="../../assets/images/gou.png" alt="" />
    </div>
    <div class="cartoon" :class="{ players: players }">
      <div class="img_box">
        <img :src="url" alt="" />
      </div>
    </div>
    <div class="playing">
      <audio
        ref="audio"
        @play="play"
        @pause="pause"
        controls
        :src="detail"
      ></audio>
    </div>
    <div class="words">
      <span @click="back" class="iconfont icon-zuojiantou1"></span>
      <marquee
        ><span class="musicName"> {{ names }}</span></marquee
      >
      <span class="iconfont icon-iconfontzhizuobiaozhun20"></span>
    </div>
    <div class="showing">
      <van-icon name="like-o" />
      <van-icon name="comment-o" />
      <van-icon name="share-o" />
    </div>

    <div class="box">
      <p @click="give"><van-icon name="arrow-left" /></p>
      <p class="set">
        <van-icon name="stop-circle-o" @click="toggle" v-if="!playingMusic" />
        <van-icon name="play-circle-o" @click="toggle" v-else />
      </p>
      <p @click="give"><van-icon name="arrow" /></p>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { Icon, Toast } from "vant";
Vue.use(Icon);
Vue.use(Toast);
import "@/assets/iconfont/iconfont.css";
export default {
  data() {
    return {
      detail: "",
      words: "",
      url: "",
      players: false,
      turn: false,
      playingMusic: true,
    };
  },
  props: {
    id: {
      type: Number | String,
      default: 0,
    },
    names: {
      type: String,
    },
  },
  methods: {
    toggle() {
      if (this.playingMusic) {
        this.$refs.audio.play();
        this.playingMusic = false;
      } else {
        this.$refs.audio.pause();
        this.playingMusic = true;
      }
    },
    give() {
      Toast("功能尚未开放");
    },
    back() {
      this.$router.go(-1);
    },

    play() {
      this.players = true;
      this.turn = true;
    },
    pause() {
      this.players = false;
      this.turn = false;
    },
  },
  async mounted() {
    // console.log(this.names);
    let id = this.id;
    const res = await this.$http.get(
      `http://localhost:3000/song/url?id=${this.id}`
    );
    this.detail = res.data[0].url;
    const ret = await this.$http.get(
      `http://localhost:3000/lyric?id=${this.id}`
    );
    this.words = ret.lrc;
    // http://localhost:3000/song/detail?ids=784516
    const fm = await this.$http.get(
      `http://localhost:3000/song/detail?ids=${this.id}`
    );
    this.url = fm.songs[0].al.picUrl;
  },
};
</script>

<style lang="scss" scoped>
.set {
  margin: 0 50px;
}
.box {
  width: 345px;
  height: 50px;
  padding: 0 15px;
  position: absolute;
  top: 560px;
  display: flex;
  justify-content: center;
  align-items: center;
  /deep/ .van-icon {
    width: 50px;
    font-size: 30px;
    text-align: center;
  }
}
.showing {
  width: 325px;
  padding: 0 25px;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  z-index: 20;
  top: 510px;
  bottom: 100;
  // background: rgba(0, 0, 0, 0.5);
  .van-icon {
    font-size: 20px;
  }
}
.bgc {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  img {
    display: block;
    opacity: 1;
    transform: scale(1);
    transform-origin: center center;
    filter: blur(80px);
  }
}
.turn {
  transform: rotateZ(15deg);
  transition: 1.5s;
}
.bai {
  position: absolute;
  top: 30px;
  left: 180px;
  width: 150px;
  height: 200px;
  background-color: balck;
  z-index: 10;
  transform-origin: left top;
  img {
    width: 100%;
    height: 100%;
  }
}
.fang {
  position: absolute;
  top: 100px;
  // background-color: red;
}
.players {
  animation: run 10s linear infinite;
}
@keyframes run {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}
.main {
  width: 100%;
  height: 100%;
  position: relative;
  img {
    width: 100%;
  }
  .playing {
    display: none;
    position: fixed;
    background-color: #f1f3f4;
    bottom: 50px;
    height: 60px;
    width: 100%;
    audio {
      width: 100%;
      height: 100%;
    }
  }
  .words {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 345px;
    height: 50px;
    padding: 0 15px;
    position: absolute;
    background-color: white;
    z-index: 10;
    top: 0;
    font-size: 20px;
    font-weight: bold;
    line-height: 50px;
    text-align: center;
    .musicName {
      width: 285px;
      text-align: center;
    }
    .iconfont {
      font-size: 30px;
    }
  }
}
.cartoon {
  width: 260px;
  height: 260px;
  position: absolute;
  top: 185px;
  left: 58px;
  background-color: black;
  border-radius: 50%;
  .img_box {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    background-color: white;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
}
</style>
